<template>
	<view>
		<u-navbar title="订单中心" @leftClick="leftClick" :autoBack="false" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20" class="navBarHeight" />
		<view class="top-tab-h"></view>
		<view class="padding-bottom-xs bg-white top-tab">
			<u-tabs :list="list" lineColor="#ECA52B" :itemStyle="{width: '20%', height: '88rpx'}" :activeStyle="{color: '#ECA52B'}" :is-scroll="false" :current="current" @change="handelTab"></u-tabs>
		</view>
		<view class="padding">
			<scroll-view scroll-y style="height: 100%"> 
				<view class="bg-white radius-5 p-20 margin-bottom-sm font-28 order-item position-r" v-for="(item, index) in orderList" :key="index" @click="toDetails(item)">
					<view class="flex justify-between margin-bottom-sm">
						<view class="text-black9">订单号：{{item.orderId}}</view>
						<view class="bg-yellow color-w font-24 p-l-10 p-r-10 p-t-4 p-b-4 position-a boxStatus" v-for="(sItem, sIndex) in orderStatusList" :key="sIndex" v-if="item.orderStatus == sItem.value">{{sItem.label}}</view>
					</view>
					<view class="flex m-b-10" v-for="(itemx, indexx) in item.details">
						<view class="goods-img">
							<image :src="itemx.productImg" class="goods-img"></image>
						</view>
						<view class="margin-left-sm flex-grow flex flex-direction justify-between">
							<view class="text-bold text-cut2">{{itemx.productName}}</view>
							<view>
								<view class="text-black9 font-24">
									<text>价格：￥{{itemx.balancePrice}}</text>
								</view>
							</view>
							<view class="font-24">
								<text>数量：{{ itemx.buyCount }}</text>
							</view>
						</view>
					</view>
					<view class="flex justify-end">
						<view class="btn" @click.stop="handleCancel(item)" v-if="item.orderStatus == 1">取消订单</view>
						<view class="btn" @click.stop="toDetails(item)" v-if="item.orderStatus == 1">去支付</view>
						<view class="btn" @click.stop="toDetails(item)" v-if="(item.orderStatus == 2 || item.orderStatus == 11 || item.orderStatus == 4 || item.orderStatus == 3) && item.isDisplayBool">申请售后</view>
						<view class="btn" @click.stop="toDetails(item)" v-if="item.orderStatus == 3">确认收货</view>
					</view>
				</view>
				<empty :show="orderList.length == 0" />
				<u-loadmore :status="status" color="#cccccc" />
			</scroll-view>
			<u-modal :show="showCancelModal" title="确认取消订单" :showCancelButton="true" :content='orderInfo.productName' confirmColor="#ECA52B" @cancel="closeCancel" @confirm="confirmCancel" />
		</view>
	</view>
</template>

<script>
	import {
		orderList,
		orderCancel,
		orderFinish,
		orderDetail,
	} from '@/common/api/order.js'
	import {
		orderStatusList
	} from '@/common/api/dict.js'
	import logistics from '@/pages/order/components/logistics.vue'
	export default {
		components: {
			logistics
		},
		data() {
			return {
				background: {
					backgroundColor: '#ECA52B',
				},
				showReceive: false,
				showCancelModal: false,
				list: [{
					name: '全部',
					type: '',
					status: null,
				}, {
					name: '未付款',
					type: 1,
					status: 1,
				}, {
					name: '待发货',
					type: 2,
					status: '2,11',
				}, {
					name: '已发货',
					type: 3,
					status: '3',
				}, {
					name: '已收货',
					type: 4,
					status: 4,
				}, {
					name: '售后',
					type: 4,
					status: '5,6',
				}],
				current: 0,
				pageNo: 0,
				status: 'loading',
				orderList: [],
				type: '',
				orderInfo: {},
				navBarHeight: 44,
				orderStatusList: orderStatusList,

				//加载订单结果
				finalTimer:null,//10秒钟定时跳转
				timer: null,//定时器（如果是支付宝或者微信支付，成功后需要轮询支付结果）
				successBool: false,//是否支付成功
			};
		},
		onReady() {
			this.getNodeInfo()
		},
		onLoad(options) {
			this.current = options.tabIndex
			this.type = this.list[this.current].status
			this.getOrderList()

			// //是否定时加载支付结果
			// let loadingPage = options.loadingPage
			// if(loadingPage){
			// 	this.timer = setInterval(()=>{
			// 		this.getOrderDetail()
			// 	},1000)
			// 	// 不管结果怎样，30秒钟都停止轮询结果
			// 	this.finalTimer = setTimeout(()=>{
			// 		uni.removeStorageSync('orderId')
			// 		this.getOrderList()
			// 		if(!this.successBool){
			// 			clearInterval(this.timer)//离开页面需要清除定时器
			// 			clearTimeout(this.finalTimer)//清除10秒钟定时跳转
			// 		}
			// 	},30000)
			// }

			// #ifdef APP-PLUS
			this.versionCodeApp = plus.runtime.version
			let currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			setTimeout(() => {
				this.wv = currentWebview.children()[0]
			}, 1000)
			// #endif
		},
		mounted(){
			uni.$on('loadFreshData',()=> {
				this.pageNo = 0
				this.orderList = []
				this.getOrderList()
			})
		},
		onReachBottom() {
			this.getOrderList()
		},
		methods: {
			// 查询订单支付结果
			getOrderDetail() {
				let that = this
				let orderId = uni.getStorageSync('orderId')
				orderDetail(orderId).then(res => {
					if(res.code === 200){
						if(res.data && res.data.payStatus){//查询到支付成功了
							uni.removeStorageSync('orderId')
							this.pageNo = 0
							that.getOrderList()
							this.successBool = true
							clearInterval(this.timer)//离开页面需要清除定时器
							clearTimeout(this.finalTimer)//清除10秒钟定时跳转
						}else{
							this.successBool = false
						}
					}
				})
			},
			leftClick(){
				let pages = getCurrentPages()
				var beforePagePath = pages[pages.length - 2].route; // 前一个页面
				// 数据中心外面的页面进入
				if( beforePagePath === 'pages/points/pointsIndex' || beforePagePath === 'pages/my/my' ){
					uni.navigateBack()
				}else if(beforePagePath === 'pages/order/placeOrder' || beforePagePath === 'pages/points/placeOrder' || beforePagePath === 'pages/order/payOrder' || beforePagePath === 'pages/order/orderList' || beforePagePath === 'pages/order/orderDetails' || beforePagePath === 'pages/webview/zfbPay'){
					uni.switchTab({
						url: '/pages/my/my'
					})
				}else{
					uni.navigateBack()
				}
			},
			closeCancel() {
				this.showCancelModal = false
			},
			handleCancel(item) {
				this.orderInfo = item
				this.showCancelModal = true
			},
			// 取消订单
			confirmCancel() {
				orderCancel(this.orderInfo.orderId).then(res => {
					if(res.code == 200) {
						this.showCancelModal = false
						this.resetData()
						this.getOrderList()
					}
					this.$msg(res.msg)
				})
			},
			// 初始化数据
			resetData() {
				this.pageNo = 0
				this.orderList = []
			},
			handelTab(e) {
				console.log("e", e)
				this.current = e.index
				this.type = this.list[this.current].status
				this.resetData()
				this.getOrderList()
			},
			getOrderList() {
				this.status = 'loading'
				this.pageNo++
				orderList({pageNo: this.pageNo, pageSize: 10, status: this.type}).then(res => {
					if(res.code == 200){
						res.data.forEach(item => {
							if(item.details.length){
								let arr = [];
								item.details.forEach(itemx => {
									arr.push(itemx.isServiceed)
								})
								if(arr.indexOf(0) != -1){
									item['isDisplayBool'] = true
								}
							}
						})
						if(this.pageNo == 1){
							this.orderList = res.data
						}else{
							this.orderList = this.orderList.concat(res.data)
						}
						if (res.data.length < 10) {
							this.status = 'nomore'
						}
					}
				})
			},
			getNodeInfo() {
				uni.createSelectorQuery().select('.navBarHeight').boundingClientRect().exec((res) => {
					this.navBarHeight = res[0].height || 44
					console.log("navBarHeight", this.navBarHeight)
				})
			},
			toDetails(item) {
				uni.navigateTo({
					url: '/pages/order/orderDetails?orderId='+item.orderId
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
.boxStatus{
	top: 0;
	right: 0;
	border-radius: 0 10rpx;
}
.top-tab {
	position: fixed;
	top: calc(var(--status-bar-height) + 88rpx);
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
}
.top-tab-h {
	width: 100%;
	height: 88rpx;
}
.goods-img {
	width: 120rpx;
	height: 120rpx;
	border-radius: 10rpx;
}
.pro-name {
	height: 64rpx;
}
.btn {
	padding: 0 20rpx;
	font-size: 24rpx;
	height: 50rpx;
	margin: 30rpx 0 0 20rpx;
	border-radius: 10rpx;
	border: 2rpx solid #ECA52B;
	background: #ECA52B;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
